<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/echarts.min.js"></script>
		<script src="../js/macarons.js"></script>
		<script src="../js/echarts-gl.min.js"></script>
		<script src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/jsMap-1.1.0.min.js" ></script>
		<script>
			function bingmap1(){
			    
			    var dom = document.getElementById("right3");
			    _bingmap1 = echarts.init(dom);
			
			    function randomData() {
			        return Math.round(Math.random() * 10000);
			    }
			    function showProvince(dt) {
					$.get(dt,function (geoJson) {
			        var name = 'hn';
			        
					//echarts.registerMap(name, geoJson);
					//http，Restfull（RMI，Axis，REST），Socket
					//MQ
					
					
					
			        echarts.registerMap(name, geoJson);
					var option = {
					    
					    title: {
					        text: '热力图',
					        subtext: '',
					        x:'center',
					        textStyle: {
					            color: '#1FFDFD',
					            fontWeight: 'normal',
					            fontSize: 16
					        }
								
					    },
					    tooltip: {
					        trigger: 'item',
					        formatter: function(datas)
					        {
					            var res = '人数:' +datas.value+ '';
					            return res;
					        }
					    },
					    grid: {
					        left: '6%',
					        right: '4%',
					        bottom: '4%',
					        top: '14%',
					        containLabel: true
					    },
								
					    visualMap: {
					        min: 0,
					        max: 30000,
					        left: '5%',
					        top: '10%',
					        calculable: true,
					        itemWidth:14,
					        itemHeight:80,
					        textStyle:{
					            color:'white'
					        },
					        inRange:{
					            color: ['#99CEF6', '#FDD961', '#EA7806']
					        }
					    },
								
					    series: [{
					        type: 'map',
					        mapType: name,
					        label: {
					            normal: {
					                show: true
					            },
					            emphasis: {
					                textStyle: {
					                    color: 'black'
					                }
					            }
					        },
					        itemStyle: {
								
					            normal: {
					                borderColor: '#389BB7',
					                areaColor: '#fff',
					            },
					            emphasis: {
					                areaColor: '#abcdef',
					                borderWidth: 0
					            }
					        },
					        animation: false,
					        data:mapdata1
								
					    }],
								
					};
			        _bingmap1.setOption(option);
					_bingmap1.on('click', function (param) {
							// 城市中文名
							var cityName = param.name;
							//alert(cityName);
							showProvince("../js/hebei.json");
						});
			        });
			    }
			
			    var currentIdx = 0;
			
			    showProvince("../js/china.json");
			//init1();
			}
			
						var mapdata1 = [
						                    {name: '秦皇岛市', value: 0},
						                    {name: '唐山市', value: 0},
						                    {name: '石家庄市', value: 0},
						                    {name: '承德市', value: 0},
						                    {name: '张家口市', value: 0},
						                    {name: '廊坊市', value: 0},
						                    {name: '保定市', value: 0},
						                    {name: '邢台市', value: 0},
						                    {name: '沧州市', value: 0},
						                    {name: '衡水市', value: 0},
						                    {name: '邯郸市', value: 0}
						                ];
				var w;
				var z1={
					name:"",
					value:0
				};
				function init1(){
					w=new SharedWorker("../js/worker1.js");
					w.port.start();
					const ID = 102;
					w.port.postMessage({id:ID});
					w.port.onmessage = function(e){
						//alert(e.data);
					var j0=JSON.parse(e.data);
					
					for (var i=0;i<j0.length;i++) {
						
						var a1=j0[i];
						
						for(var j=0;j<mapdata1.length;j++){
							var a2=mapdata1[j];
							if(a1.cname==a2.name){
								mapdata1[j].value=a1.gd;
								break;
							}
						}
						
					}
					//bingmap1();
					};
				}
				
		</script>
	</head>
	<body onload="bingmap1();">
		<div id="right3" style="width: 100%;height:800px;"></div>
	</body>
</html>
